<%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.List,com.hdl.entity.MallCart,com.hdl.entity.CartItem,com.hdl.entity.MallProduct"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>淘宝购物车页面</title>
<link href="assets/css/css/myCart.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="assets/plugins/growl-notification/colored-theme.min.css">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/plugins/growl-notification/growl-notification.min.js"></script>
<script src="assets/js/sys.js"></script>
<script type="text/javascript" src="assets/js/js/myCart.js"></script>
<style>
	.img{
		width:60px;
		height:60px;
	}
</style>
</head>

<body>
<div id="header" style="height: 80px"><img src="assets/img/images/logo.png" alt="logo" style="width: 225px;height: 80px" /></div>
<div id="nav" >您的位置：<a href="/hdl">首页</a> > <a href="order-1.let">我的订单</a> > 我的购物车</div>
<div id="navlist">
  <ul>
    <li class="navlist_red_left"></li> 
    <li class="navlist_red">1. 查看购物车</li> 
    <li class="navlist_red_arrow"></li>
    <li class="navlist_gray">2. 确认订单信息</li> 
    <li class="navlist_gray_arrow"></li> 
     <li class="navlist_gray">3. 付款到支付宝</li> 
    <li class="navlist_gray_arrow"></li>   
     <li class="navlist_gray">4. 确认收货</li> 
    <li class="navlist_gray_arrow"></li> 
    <li class="navlist_gray">5. 评价</li> 
    <li class="navlist_gray_right"></li>   
  </ul>
</div>
<div id="content">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
 
 <form action="deleteItems.let" method="post" name="myform" id="pay_form">
  <tr>
    <td class="title_1"><input id="allCheckBox" type="checkbox" value=""  />全选</td>
    <td class="title_2" colspan="2">商品</td>
    <td class="title_3">获积分</td>
    <td class="title_4">单价（元）</td>
    <td class="title_5">数量</td>
    <td class="title_6">小计（元）</td>
    <td class="title_7">操作</td>
  </tr>
  <tr>
    <td colspan="8" class="line"></td>
  </tr>

  <c:if test="${not empty cart.list }">
  <c:forEach items="${cart.list}" var="item" varStatus="s">
  <tr  class="product">
    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" /><input type="hidden" name="uid" value="${item.product.mallProductId }"></input></td>
    <td class="cart_td_2"><img class="img" src="${item.product.mallProductPath}" alt="shopping"/></td>
    <td class="cart_td_3"><a href="#">${item.product.mallProductName}</a></td>
    <td class="cart_td_4">${item.product.mallProductScore}</td>
    <td class="cart_td_5">${item.product.mallProductPrice1}</td>
    <td class="cart_td_6"><img src="assets/img/images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_${s.count}','minus')" class="hand"/> <input id="num_${s.count }" type="text"  value="${item.num }" class="num_input" readonly="readonly" name="num"/> <img src="assets/img/images/taobao_adding.jpg" alt="add" onclick="changeNum('num_${s.count}','add')"  class="hand"/></td>
    <td class="cart_td_7">${item.total }</td>
    <td class="cart_td_8"><a href="javascript:deleteItem(${item.product.mallProductId })">删除</a></td>
  </tr>	
  </c:forEach>

   <tr>
   <td  colspan="3"><a href="javascript:deleteSelectRow()"><img src="assets/img/images/taobao_del.jpg" alt="delete"/></a></td>
    <td colspan="5" class="shopend">商品总价（不含运费）:<label id="total" class="yellow">${cart.mallCartTotal }</label> 元<br />
    可获积分 <label class="yellow" id="integral"></label> 点<br />
    <input type="hidden" name="score" />
    <input name=" " type="image" src="assets/img/images/taobao_subtn.jpg" id="tj" /></td>
  </tr>
  </c:if>
  <c:if test="${empty cart.list }">
  <h1>购物车空空如也，快去买点东东吧</h1>
  </c:if>
  </form>
</table>

</div>
</body>
</html>
<script>
	
	//单个删除
	function deleteItem(id) {
        //提示是否删除
        if(confirm("确定要删除吗")){
            location.href=  "/hdl"+"/deleteItem.let?mallProductId=" + id;
        }
    }
	
	//删除选中
	function deleteSelectRow(){
		if(confirm("您确定要删除选中条目吗")){

            //判断是否有选中条目
            var flag = false;
            var cbs =  document.getElementsByName("cartCheckBox");
            for(var i = 0; i < cbs.length; i++){
                if(cbs[i].checked){
                    flag = true;
                    break;
                }
            }
            if(flag){
            	//删除全部购物项
            	 var pay_form = document.getElementById("pay_form");
            	pay_form.action="deleteItems.let";
            	pay_form.submit()
            }
        }
	}
	
	
	//全选全不选
    document.getElementById("allCheckBox").onclick = function () {
        var cbs =  document.getElementsByName("cartCheckBox");

        for(var i = 0; i < cbs.length; i++){
            cbs[i].checked = this.checked;
        }
    }
	
	//提交
	document.getElementById("tj").onclick = function () {
		var pay_form = document.getElementById("pay_form");
    	pay_form.action="updateCart.let";
    	pay_form.submit()
	}
</script>
